<template>
	<view class="pick-music">
		<view class="main-tabbar">
			<view :class="['tabbar-item-1', tabbarAc == item.id ? 'ac' : '']" v-for="(item, index) in tabbarList" @click="changeTabbarAc({ item, index })" :key="item.id">
				<view class="text">{{ item.text }}</view>
			</view>
		</view>
		<view class="main-tabbar" v-if="tabbarAc == 1">
			<view :class="['tabbar-item', tabbarAc2 == item.id ? 'ac' : '']" v-for="(item, index) in tabbarList2" :key="item.id" @click="changeTabbarAc2({ item, index })">
				<view class="text">{{ item.classifyName }}</view>
			</view>
		</view>
		<view class="main-content">
			<scroll-view class="scroll_view" scroll-y :scroll-into-view="audioListLeft1" scroll-with-animation style="width: 100%" @scrolltolower="contentListScroll">
				<view class="audio-list contentList" v-if="tabbarAc == 1">
					<template v-if="yushe.length">
						<view :class="['audio-item', item.matterUrl == selectItem.matterUrl ? 'ac' : '']" v-for="(item, index) in yushe" :id="'audioItem' + item.id" :key="item.id">
							<view class="left">
								<view class="pic-box">
									<image class="audio-pic" :src="imgPath + 'createAvatar/mmmm.svg'" mode=""></image>
									<view class="playStatusIcon" @tap.stop="pickShiTingItem({ item, index })">
										<image v-if="item.matterUrl == shiTingItem.matterUrl" class="icon playing" :src="imgPath + 'index/playing.svg'" mode="widthFix"></image>
										<image v-else class="icon played" :src="imgPath + 'index/played.svg'" mode="widthFix"></image>
									</view>
								</view>
								<view class="date-time">
									<view class="date">{{ item.matterName }}</view>
								</view>
								<view class="useBtn" @tap.stop="pickContentItem({ item, index })">
									<view class="useBtn-text">{{ item.matterUrl != selectItem.matterUrl ? "使用" : "取消" }}</view>
								</view>
							</view>
							<view class="right">
								<view class="useBtn" @tap="pickContentItem({ item, index })">
									<view v-if="" class="useBtn-text">{{ item.matterUrl != selectItem.matterUrl ? "使用" : "已使用" }}</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<view class="contentList-kong" v-if="tabbarAc == 1 && yushe.length == 0">
					<view class="text">暂无数据</view>
				</view>
				<view class="audio-list contentList" v-if="tabbarAc == 2">
					<view :class="['audio-item']" @tap="addContentItem()">
						<view class="left">
							<view class="pic-box" style="border: 1px solid #00deb9; padding: 3vw; height: 15vw; box-sizing: border-box; border-radius: 2.5vw">
								<image class="audio-pic" style="height: 100%" :src="imgPath + 'createAvatar/changjing-add.svg'" mode="widthFix"></image>
							</view>
							<view class="date-time">
								<view class="date" style="opacity: 0">{{ "本地上传" }}</view>
								<!-- <view class="time">{{item.durationStr}}</view> -->
							</view>
							<view class="useBtn">
								<view class="useBtn-text">{{ "本地上传" }}</view>
							</view>
						</view>
					</view>
					<view :class="['audio-item', item.matterUrl == selectItem.matterUrl ? 'ac' : '']" v-for="(item, index) in geren" :id="'audioItem' + item.id" :key="item.id">
						<view class="left">
							<view class="pic-box">
								<image class="audio-pic" :src="imgPath + 'createAvatar/mmmm.svg'" mode=""></image>
								<view class="playStatusIcon" @tap.stop="pickShiTingItem({ item, index })">
									<image v-if="item.matterUrl == shiTingItem.matterUrl" class="icon playing" :src="imgPath + 'index/playing.svg'" mode="widthFix"></image>
									<image v-else class="icon played" :src="imgPath + 'index/played.svg'" mode="widthFix"></image>
								</view>
							</view>
							<view class="date-time">
								<view class="date">{{ item.matterName }}</view>
								<!-- <view class="time">{{item.durationStr}}</view> -->
							</view>
							<view class="useBtn" @tap.stop="pickContentItem({ item, index })">
								<view class="useBtn-text">{{ item.matterUrl != selectItem.matterUrl ? "使用" : "取消" }}</view>
							</view>
						</view>
						<view class="right">
							<image class="icon" :src="imgPath + 'createAvatar/delAudio.svg'" mode=""></image>
							<view class="useBtn" @tap="pickContentItem({ item, index })">
								<view class="useBtn-text">{{ item.matterUrl != selectItem.matterUrl ? "使用" : "已使用" }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="textStyle-item">
			<view class="label">音量</view>
			<view class="r-c slider-box">
				<slider :value="volume" @change="changeElVolume" step="1" :min="0" :max="100" show-value />
			</view>
		</view>
		<view class="main-selectItem" v-if="!!shiTingItem.matterName" v-show="0">
			<view class="item-info">
				<view class="left">
					<view class="pic">
						<image class="audio-pic" :src="imgPath + 'createAvatar/music&audio.svg'" mode=""></image>
					</view>
					<view class="text">已选择：{{ selectItem.matterName }}</view>
				</view>
				<view class="right">
					<view class="btn del" @tap="removeContentItem()">
						<image class="icon" :src="imgPath + 'createAvatar/delAudio.svg'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="controls">
				<!-- <Audio class="audioEl" :autoplay="true" ref="audioEl" @pause="removeShiTingItem" :src="selectItem.matterUrl" :name="selectItem.matterName" controls :loop="true"></Audio> -->
			</view>
		</view>
	</view>
</template>

<script>
import * as api from "@/api/createVideo.js";
let timer = null;
import { tools } from "@/utils/util";
import axios from "axios";
export default {
	name: "",
	props: {
		pageShow: {
			type: Boolean,
			default: true
		},
		show: {
			type: Boolean,
			default: false
		},
		promiseRes: {
			type: Object | Function,
			default() {
				return null;
			}
		},
		selectItem: {
			type: Object,
			default() {
				return {};
			}
		},
		pageItem: {
			type: Object,
			default: null
		},
		volume: {
			type: Number,
			default: 40
		}
	},
	data() {
		return {
			imgPath: tools.imgPath,
			pageTabbarAc: 0,
			pageTabbarList: [],
			tabbarAc: 1,
			tabbarList: [],
			tabbarAc2: null,
			tabbarList2: [],
			yushe: [],
			yusheCurrent: 1,
			yusheSize: 20,
			yusheTotal: null,
			geren: [],
			gerenCurrent: 1,
			gerenSize: 20,
			gerenTotal: null,
			contentList: [],
			uploadFileSize: 200,
			shiTingItem: {},
			audioContext: null,
			audioDuration: 0,
			audioCurrentTime: 0,
			audioPlaying: false,
			audioListLeft1: ""
		};
	},
	async created() {
		this.initTabbarList();
		this.initAudioContext();
		let next = await this.initGetData();
		if (this.promiseRes) {
			this.promiseRes(true);
		}
	},
	onShow() {},
	methods: {
		onShowFn() {},
		// 修改bgm音量
		changeElVolume(e) {
			let volume = e.detail.value;
			console.log(volume);
			this.$emit("changeElVolume", "bgm", volume);
			if (!this.audioContext) this.initAudioContext();
			this.audioContext.volume = volume * 0.01;
		},
		// 去除试听item
		removeShiTingItem() {
			if (this.audioContext) {
				this.audioContext.pause();
			}
			this.shiTingItem = {};
		},
		//选择试听item
		async pickShiTingItem({ item, index }) {
			console.log("选择试听item", { item, index });
			if (item.matterUrl == this.shiTingItem.matterUrl) {
				this.removeShiTingItem();
				return;
			}

			this.shiTingItem = item;
			this.shiTingItem.audioSrc = item.matterUrl;
			this.$set(this.shiTingItem, "audioSrc", item.matterUrl);
			this.audioContext.src = this.shiTingItem.audioSrc;
			this.audioContext.volume = this.volume * 0.01;
			this.audioContext.play();
		},
		// 本地上传
		async addContentItem() {
			// #ifdef APP
			uni.setStorageSync("reqType", "mat_music_back");
			uni.navigateTo({
				url: "/pages/uploadPage/uploadPage"
			});
			return;
			// #endif
			const that = this;
			let extension = ["wav", "mp3", "aac", "m4a", "ogg", "3gpp"];
			extension = extension.reduce((p, e) => {
				p.push(e);
				p.push(e.toLocaleUpperCase());
				return p;
			}, []);

			let res = await new Promise((next) => {
				// #ifdef H5
				uni.chooseFile({
					count: 1, //默认100
					extension: extension,
					success: function (res) {
						next(res);
					},
					fail(err) {
						console.error(err);
						next(null);
					}
				});
				// #endif

				// #ifdef MP-WEIXIN
				uni.chooseMessageFile({
					count: 1, //默认100
					type: "file",
					extension: extension,
					success: async (res) => {
						next(res);
					},
					fail(err) {
						console.error(err);
						next(null);
					}
				});
				// #endif
			});
			if (!res) return;

			const tempFilePaths = res.tempFilePaths;
			let file = res.tempFiles[0];
			console.log(file);

			if (!extension.includes(file.name.slice(file.name.lastIndexOf(".") + 1))) {
				return tools.easyToast("请选择音频文件！");
			}
			let name = file.name.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\.]/g, "");
			// if (!/^[\u4e00-\u9fa5a-zA-Z0-9\.\-]+$/.test(name)) {
			// 	return tools.easyToast("文件名不能包含符号，只能是文字或数字");
			// }
			if (file.size / 1024 / 1024 > this.uploadFileSize) {
				return tools.easyToast(`文件大小超过${this.uploadFileSize}M!`);
			}
			uni.showLoading({
				title: "上传中"
			});
			let matterValue = await new Promise(async (res) => {
				let tempCtx = uni.createInnerAudioContext();
				tempCtx.volume = 0;
				tempCtx.autoplay = true;
				tempCtx.src = file.path;
				tempCtx.onTimeUpdate((ctxres) => {
					console.log("tempCtx.onTimeUpdate", tempCtx.duration, ctxres);
					if (tempCtx.duration && tempCtx.duration != Infinity) {
						console.log("tempCtx.onCanplay1-1", tempCtx.duration);
						res(tempCtx.duration);
						tempCtx.stop();
					} else {
						console.log("tempCtx.onCanplay1-2", tempCtx.duration);
					}
				});
				tempCtx.onStop(() => {
					tempCtx.destroy();
				});
				tempCtx.onEnded(() => {
					tempCtx.destroy();
				});
			});
			console.log(matterValue);
			if (!matterValue) {
				tools.easyToast("stopTime && 添加失败！请重试~");
				return;
			}
			if (matterValue < 1) {
				return tools.easyToast("音频时长必须不少于1秒！");
			}
			let ossData = await api.postOSS({
				reqType: "mat_music_back",
				matName: name,
				payLoad: { matterValue: matterValue }
			});
			uni.hideLoading();
			uni.showLoading({
				title: "上传中"
			});
			let ress = await that.wx_getOSSApi_new(ossData, file.path, name);
			uni.hideLoading();
			if (!ress) return;
			that.geren = [];
			that.getDataApi2();
		},
		// wx小程序oss上传文件
		wx_getOSSApi_new(ossData, file, name) {
			const that = this;
			let res = ossData;
			function getUUID() {
				let keyStr = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
				keyStr = "xxxxxxxx-6xxx";
				return keyStr.replace(/[xy]/g, (c) => {
					return (c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8").toString(16);
				});
			}
			let url_name = "https://alleymall.oss-cn-guangzhou.aliyuncs.com";
			let key = res.data.dir + "/" + getUUID() + name;
			return new Promise((next) => {
				uni.uploadFile({
					url: url_name,
					filePath: file,
					name: "file",
					formData: {
						policy: res.data.policy,
						signature: res.data.signature,
						ossaccessKeyId: res.data.accessid,
						key: key,
						dir: res.data.dir,
						host: res.data.host,
						expire: res.data.expire,
						callback: res.data.callback
					},
					success: (uploadFileRes) => {
						let src = url_name + "/" + key;
						// console.log(src);
						// that.audioPlayerSrc = src;
						// console.log(response);
						next({ ...uploadFileRes, src });
					},
					fail(err) {
						console.log(err);
						next(false);
					}
				});
			});
		},

		//上传文件api
		async getOSSApi_new(ossData, file, name) {
			const that = this;
			let res = ossData;

			function getUUID() {
				let keyStr = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
				keyStr = "xxxxxxxx-6xxx";
				return keyStr.replace(/[xy]/g, (c) => {
					return (c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8").toString(16);
				});
			}
			const formData = new FormData();
			let url_name = "https://alleymall.oss-cn-guangzhou.aliyuncs.com";
			let key = res.data.dir + "/" + getUUID() + name;
			formData.append("policy", res.data.policy);
			formData.append("signature", res.data.signature);
			formData.append("ossaccessKeyId", res.data.accessid);
			formData.append("key", key);
			formData.append("dir", res.data.dir);
			formData.append("host", res.data.host);
			formData.append("expire", res.data.expire);
			formData.append("callback", res.data.callback);
			// formData.append('type', res.data.callback)
			formData.append("file", file);

			return axios
				.post(url_name, formData, {
					headers: {
						"Content-Type": "multipart/form-data"
					}
				})
				.then((response) => {
					let src = url_name + "/" + key;
					// console.log(src);
					// that.audioPlayerSrc = src;
					// console.log(response);
					return {
						...response,
						src
					};
				})
				.catch((error) => {
					console.log(error);
				});
		},

		// 滚动事件(做懒加载)
		contentListScroll(event) {
			const that = this;
			if (timer) clearTimeout(timer);
			timer = setTimeout(() => {
				if (that.tabbarAc == 1) {
					if (this.yusheTotal === this.yushe.length) return;
					this.yusheCurrent++;
					this.getDataApi();
				} else {
					if (this.gerenTotal === this.geren.length) return;
					this.gerenCurrent++;
					this.getDataApi2();
				}
				clearTimeout(timer);
				timer = null;
			}, 300);
		},
		// 获取公共数据分类api
		async getSysmatTwoType() {
			const type = "music";
			let res = await api.getSysmatTwoType(type);
			if (!res) return;
			this.tabbarList2 = [
				{
					id: null,
					classifyName: "全部"
				},
				...res.data
			];
			this.tabbarAc2 = this.tabbarList2[0].id;
			return true;
		},
		// 秒转时间(s=>mm:ss)
		seconds2time(seconds) {
			seconds = seconds.toFixed(0);
			return `${Math.floor(seconds / 60)
				.toString()
				.padStart(2, 0)}:${(seconds % 60).toString().padStart(2, 0)}`;
		},

		// 获取公共数据api
		async getDataApi(_id) {
			_id = ["Null", "Number", "String"].includes(tools.myTypeOf(_id)) ? _id : this.tabbarAc2;
			let res = null;
			if (_id) {
				//获取分类数据
				let data = {
					oneid: _id,
					size: this.yusheSize,
					current: this.yusheCurrent,
					twoid: 2 //横屏1，竖屏2
				};
				res = await api.getVideoSysmat(data);
			} else {
				//获取全部数据
				let data = {
					type: "music",
					size: this.yusheSize,
					current: this.yusheCurrent,
					id: 2 //横屏1，竖屏2
				};
				res = await api.getVideoSysmatAll(data);
			}
			if (!res?.data?.records) {
				this.yushe = [];
				this.yusheTotal = null;
				return;
			}
			this.yusheTotal = res.data.total;
			let yushe = res.data.records.map((e) => ({
				...e,
				volume: this.volume,
				picSrc: e.theCover,
				duration: 0,
				durationStr: "00:00"
			}));
			Promise.all(
				yushe.map(
					(e, i) =>
						new Promise(async (resolve, reject) => {
							// let timer = setTimeout(() => resolve(false), 5000);
							return resolve(e);
							let duration = await new Promise(async (res) => {
								let time = await api.getDuration({
									lca: e.matterUrl
								});
								if (!time || !time.data) res(false);
								res(time.data / 1000);
							});
							let index = this.yushe.findIndex((ee) => ee.id == e.id);
							this.$set(this.yushe, index, {
								...e,
								duration,
								durationStr: this.seconds2time(duration)
							});
							resolve({
								...e,
								duration,
								durationStr: this.seconds2time(duration)
							});
						})
				)
			);
			this.yushe = [...this.yushe, ...yushe];
			return true;
		},
		// 获取私有数据api
		async getDataApi2() {
			let res = await api.getUserSource("music");
			if (!res) return;
			let geren = res.data.map((e) => {
				let duration = JSON.parse(e.payLoad)?.matterValue ?? 0;
				return {
					...e,
					picSrc: e.theCover,
					duration: duration,
					durationStr: this.seconds2time(duration)
				};
			});
			this.geren = geren;
			return true;
		},
		// 获取后端数据
		async initGetData() {
			let getData = new Promise(async (next) => {
				let flag = await this.getSysmatTwoType();
				if (!flag) return;
				let flag2 = await this.getDataApi();
				if (!flag2) return;
				next(true);
			});
			await Promise.all([getData]);
			return true;
		},
		// 音频播放器初始化
		initAudioContext() {
			this.audioContext = uni.createInnerAudioContext();
			this.audioContext.onCanplay((res) => {
				if (!this.audioContext.duration || this.audioContext.duration == Infinity) {
					let tempCtx = uni.createInnerAudioContext();
					tempCtx.volume = 0;
					tempCtx.autoplay = true;
					tempCtx.src = this.audioContext.src;
					tempCtx.onTimeUpdate((ctxres) => {
						console.log("tempCtx.onTimeUpdate", tempCtx.duration, ctxres);
						if (tempCtx.duration && tempCtx.duration != Infinity) {
							console.log("tempCtx.onCanplay1-1", tempCtx.duration);
							this.audioDuration = tempCtx.duration;
							tempCtx.stop();
						} else {
							console.log("tempCtx.onCanplay1-2", tempCtx.duration);
						}
					});
					tempCtx.onStop(() => {
						tempCtx.destroy();
					});
					tempCtx.onEnded(() => {
						tempCtx.destroy();
					});
				} else {
					console.log("this.audioContext.onCanplay2", this.audioContext.duration);
					this.audioDuration = this.audioContext.duration;
				}
			});
			this.audioContext.onPlay((res) => {
				this.audioPlaying = true;
				console.log("this.audioContext.onPlay", res);
			});
			this.audioContext.onPause((res) => {
				this.audioPlaying = false;
				console.log("this.audioContext.onPause", res);
			});
			this.audioContext.onEnded((res) => {
				this.audioPlaying = false;
				this.audioContext.seek(0);
				this.audioCurrentTime = 0;
				console.log("this.audioContext.onEnded", res);
			});
			this.audioContext.onStop((res) => {
				this.audioPlaying = false;
				this.audioContext.seek(0);
				this.audioCurrentTime = 0;
				console.log("this.audioContext.onStop", res);
			});
			this.audioContext.onSeeking((res) => {
				console.log("this.audioContext.onSeeking", this.audioContext.currentTime);
			});
			this.audioContext.onTimeUpdate((res) => {
				this.audioCurrentTime = this.audioContext.currentTime;
				console.log("this.audioContext.onTimeUpdate", this.audioContext.currentTime);
			});
		},
		// 初始化contentList
		initContentList() {
			this.contentList = matData.map((e) => ({
				...e,
				picSrc: e.theCover
			}));
		},
		//初始化pageTabbarList
		initPageTabbarList() {
			this.pageTabbarList = [
				{
					text: "选择数字人",
					id: 0
				},
				{
					text: "编辑数字人",
					id: 1
				}
			];
			if (this.pageItem) {
				// console.log('初始化pageTabbarList',this.pageItem);
				this.pageTabbarAc = this.pageItem.pageAc;
			}
		},
		// 初始化tabbarList
		initTabbarList() {
			this.tabbarList = [
				{
					text: "预设",
					id: 1
				},
				{
					text: "本地",
					id: 2
				}
			];
		},
		// 切换类型
		changeTabbarAc({ item, index }) {
			this.tabbarAc = item.id;
			if (this.tabbarAc == 2) {
				//获取私有数据
				this.getDataApi2();
			}
		},
		//切换数据子类型
		async changeTabbarAc2({ item, index }) {
			this.tabbarAc2 = item.id;
			this.yushe = [];
			this.yusheCurrent = 1;
			this.yusheTotal = null;
			this.audioListLeft1 = "";
			let next = await this.getDataApi();
			this.$nextTick(() => {
				setTimeout(() => {
					this.audioListLeft1 = "audioItem" + this.selectItem.id;
				}, 688);
			});
		},
		//选择item
		pickContentItem({ item, index }) {
			if (item.matterUrl == this.selectItem.matterUrl) {
				this.removeContentItem();
				return;
			}
			this.$emit("pickMusic", {
				item: {
					...item,
					volume: this.volume
				},
				index
			});
			// this.audioContext.src = item.matterUrl;
			// this.audioContext.volume = this.volume * 0.01;
			// this.audioContext.play();
		},
		// 去除item
		removeContentItem() {
			if (this.audioContext) {
				this.audioContext.pause();
			}
			this.$emit("removeMusic");
		}
	},
	watch: {
		pageShow(val) {
			if (val) {
				this.getDataApi2();
				// this.initGetData();
			} else {
				// console.log("page-hide");
			}
		},
		["pageItem.pageAc"](val) {
			return;
			this.initPageTabbarList();
		},
		show(val) {
			if (!val) {
				this.removeShiTingItem();
				this.audioListLeft1 = "";
			} else {
				if (this.selectItem && this.selectItem.id) {
					if (this.yushe.find((e) => e.id == this.selectItem.id)) {
						this.audioListLeft1 = "audioItem" + this.selectItem.id;
					} else {
						let item = null;
						if (this.tabbarAc2 == "") {
							item = this.tabbarList2[0];
						} else {
							item = this.tabbarList2[1];
						}
						if (!item) return;
						this.changeTabbarAc2({
							item: item
						});
					}
				}
			}
		},
		["pageItem.ac"](val) {
			if (val != 4) {
				this.removeShiTingItem();
				return;
			}
			this.$emit("changeMyDH", 30);
		}
	}
};
</script>

<style lang="scss">
.pick-music {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;

	.main-tabbar {
		display: -webkit-box;
		overflow: auto;

		.tabbar-item-1 {
			padding: 2vw;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;

			&.ac {
				.text {
					color: rgba(0, 153, 127, 1);
					border-bottom: 2px solid rgba(243, 173, 51, 1);
				}
			}

			.text {
				padding-bottom: 2vw;
			}
		}

		.tabbar-item {
			padding: 0.5vw 1vw;
			color: rgba(255, 255, 255, 0.36);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 100vw;
			background: rgba(255, 255, 255, 0.125);
			margin: 0vw 5vw 2vw 0vw;
			min-width: 10vw;

			&.ac {
				border: 2px solid rgba(0, 153, 127, 1);

				.text {
					color: rgba(0, 153, 127, 1);
					font-weight: 700;
				}
			}

			.text {
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}

	.main-content {
		flex: 1;
		overflow: hidden;
		display: flex;

		.scroll_view {
			width: 100%;
			height: 36vh;
			display: flex;
			overflow: hidden;
		}

		.audio-list {
			flex: 1;
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 0vw;
			text-align: center;
			overflow: hidden;

			.audio-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 0vw 1vw;
				height: max-content;
				border-radius: 1.5vw;

				&.ac {
					border: 1px solid #00deb9;
				}

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					height: 100%;

					.pic-box {
						width: 20vw;
						height: 100%;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;

						.audio-pic {
							width: 15vw;
							height: 15vw;
							display: block;
							border-radius: 50%;
						}

						.playStatusIcon {
							position: absolute;
							left: 0vw;
							top: 0vw;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;

							.icon {
								width: 8.6vw;
								height: 8.6vw;
								display: block;
							}
						}
					}

					.date-time {
						font-size: 3vw;
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						overflow: hidden;
						.date {
							width: 22vw;
							align-items: center;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					.useBtn {
						margin-top: 2vw;
						background: linear-gradient(270deg, #00deb9 0%, #7affe9 100%);
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 100vw;
						padding: 1vw 2vw;

						.useBtn-text {
							font-size: 3vw;
							color: #111;
						}
					}
				}

				.right {
					display: none;
					justify-content: center;
					align-items: center;
					height: 100%;

					.time {
					}

					.icon {
						width: 5vw;
						height: 5vw;
						display: block;
						padding: 0vw 3vw;
					}

					.useBtn {
						background: linear-gradient(270deg, #00deb9 0%, #7affe9 100%);
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 100vw;
						padding: 1vw 2vw;

						.useBtn-text {
							font-size: 3.5vw;
							color: #111;
						}
					}
				}
			}
		}

		.contentList-kong {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.text {
				color: #fff;
				font-size: 4.6vw;
			}
		}
	}

	.textStyle-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 2vw 0vw;

		.label {
		}

		.r-c {
			margin-left: 3vw;
			flex: 1;

			&.slider-box {
			}
		}
	}

	.main-selectItem {
		.item-info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				justify-content: center;
				align-items: center;

				.pic {
					margin-right: 2vw;

					.audio-pic {
						width: 10vw;
						height: 10vw;
						display: block;
					}
				}

				.text {
				}
			}

			.right {
				.btn {
					.icon {
						width: 5vw;
						height: 5vw;
						display: block;
					}
				}
			}
		}

		.controls {
			width: 100%;

			.audioEl {
				width: 100%;
			}

			.btns {
				display: flex;

				.btn {
					background: linear-gradient(270deg, #00deb9 0%, #7affe9 100%);
					color: #111111;
					border-radius: 100vw;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 2vw;
					padding: 1vw 2vw;
					font-size: 17px;
				}
			}
		}
	}
}
</style>
